<script lang="ts" setup>
  import { provide, ref, computed } from "vue";

  interface TabsProps {
    headerStyle?: any;
    titleStyle?: any;
    defaultActiveTab?: string;
    items?: any[];
    direction?: string;
    bgColor?: string;
  }

  const props = withDefaults(defineProps<TabsProps>(), {
    direction: "horizontal",
    items: [] as any,
    headerStyle: {},
  });

  const activedKey = ref(props.defaultActiveTab);
  const tabs = ref<any[]>(props.items);

  provide("activedKey", activedKey);
  provide("tabs", tabs);

  const handleClick = (key: any) => {
    activedKey.value = key;
  };

  const styles = computed(() => {
    return {
      backgroundColor: props.bgColor,
      "umi-tabs-vertical": props.direction === "vertical",
    };
  });

  const classNames = computed(() => {
    return {
      "umi-tabs": true,
      "umi-tabs-vertical": props.direction === "vertical",
    };
  });

  const headerClassNames = computed(() => {
    return {
      "umi-tabs-header": true,
    };
  });
</script>

<template>
  <div :class="classNames" :style="styles">
    <div :class="headerClassNames" :style="headerStyle">
      <div v-for="item in tabs" class="umi-tabs-title" :style="titleStyle" :class="{ 'umi-tabs-actived': item.key === activedKey }" @click="handleClick(item.key)">{{ item.title }}</div>
    </div>
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
  .umi-tabs {
    width: 100%;

    &-header {
      display: flex;
    }

    &-vertical {
      display: flex;

      .umi-tabs-header {
        flex-direction: column;
      }
    }

    ::v-deep(.umi-panel) {
      flex: 1;
    }

    &-title {
      padding: 6px 10px 6px;
      text-align: center;
      cursor: pointer;
    }

    &-actived {
      color: #007bff;
      position: relative;

      &::after {
        position: absolute;
        content: " ";
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        height: 2px;
        background-color: #007bff;
        border-radius: 10px;
      }
    }
  }
</style>
